function initSwitchTab() {//标签页切换脚本
    //先获取到相关元素(标签页按钮，会话好友列表)

    let tabSession = document.querySelector(".tab .tab-session");
    let tabFriend = document.querySelector(".tab .tab-friend");
    let lists = document.querySelectorAll(".list");//结果是个数组
    //[0]会话，1好友
    //针对标签页按钮，注册点击事件
    //如果点击会话，切换对应图片，并显示会话界面隐藏好友页面

    tabSession.onclick = function () {
        // 1. 设置图标
        tabSession.style.backgroundImage = "url(img/对话绿.png)";
        tabFriend.style.backgroundImage = "url(img/用户灰.png)";

        // 2. 切换界面
        lists[0].className = "list";
        lists[1].className = "list hide";
    };

    tabFriend.onclick = function () {
        // 1. 设置图标
        tabSession.style.backgroundImage = "url(img/对话灰.png)";
        tabFriend.style.backgroundImage = "url(img/用户绿.png)";

        // 2. 切换界面
        lists[0].className = "list hide";
        lists[1].className = "list";
    };

}

initSwitchTab();

//初始化websocket

let webSocket = new WebSocket("ws://127.0.0.1:8080/WebSocketmessage");//路径与后端配置注册的要匹配

//注册回调函数

webSocket.onopen = function () {
    console.log("连接成功");
}

webSocket.onclose = function () {
    console.log("连接断开");
}
webSocket.onerror = function () {
    console.log("连接出错");
}

webSocket.onmessage = function (e) {
    //收到消息自动执行
    //TODO

    console.log("收到消息:" + e.data);

    let resp = JSON.parse(e.data);
    if (resp.type == "message") {
        handleMessage(resp);
    } else {
        console.log("非法类型");
    }
}

//把前端收到的消息展示到会话上面
function handleMessage(resp) {
    //根据sessionId获取当前会话的li标签

    let curSessionLi = findSessionLi(resp.sessionId);

    if (curSessionLi == null) {
        //创建新会话
        curSessionLi = document.createElement("li");
        curSessionLi.setAttribute("message-session-id", resp.sessionId);
        curSessionLi.innerHTML = "<h3>" + resp.fromName + "</h3>"
            + "<p>" + "" + "</p>";

        curSessionLi.onclick = function () {
            clickSession(curSessionLi);
        }
    }
    //把新消息展示到会话区域
    let p = curSessionLi.querySelector("p");
    p.innerHTML = resp.content;
    if (p.innerHTML.length > 10) {
        p.innerHTML = p.innerHTML.substring(0, 10) = "...";
    }
    //把收到消息的会话置顶
    let sessionListUL = document.querySelector("#session-list");
    sessionListUL.insertBefore(curSessionLi, sessionListUL.children[0]);
    //如果当前会话是选中状态，则放在右侧消息列表中
    if (curSessionLi.className == "selected") {
        let messageShowDiv = document.querySelector(".right .message-show");
        addMessage(messageShowDiv, resp);
        scrollBottom(messageShowDiv);
    }
    //新增消息的同时调整滚动条调整长度
    //可以设置红点提醒，消息音TODO
}

function findSessionLi(targetSessionId) {
    let sessionLis = document.querySelectorAll("#session-list li");

    for (let li of sessionLis) {
        let sessionId = li.getAttribute("message-session-id");

        if (sessionId == targetSessionId) {
            return li;
        }
    }

    return null;
}

//实现消息发送和接收

function initSendButton() {
    //获取发送按钮
    let sendButton = document.querySelector(".right .ctrl button");
    let messageInput = document.querySelector(".right .message-input");

    sendButton.onclick = function () {
        if (!messageInput.value) {
            return;
        }

        //获取当前选中的会话id
        let selectedLi = document.querySelector("#session-list .selected");

        if (selectedLi == null) {
            return;
        }

        let sessionId = selectedLi.getAttribute("message-session-id");

        //构造json数据用于请求或者相应

        //这里是发送消息的((请求))
        let req = {
            type: "message",
            sessionId: sessionId,
            content: messageInput.value
        };

        //发送数据(websocket)
        //req目前是object，但send必须是string，需要转换

        req = JSON.stringify(req);//这里很重要
        console.log("发送" + req);

        webSocket.send(req);

        //发送完之后，清空输入框

        messageInput.value = "";

    }
}

initSendButton();


//从服务器获取用户登录数据,不存在就跳到登录页面

function getUserInfo() {
    $.ajax({
        type: 'get',
        url: '/userInfo',
        success: function (body) {
            //从服务器获得的用户数据
            if (body.userId && body.userId > 0) {
                let userDiv = document.querySelector('.main .left .user');
                userDiv.innerHTML = body.username;
                userDiv.setAttribute("user-id", body.userId);
            } else {
                alert("请先登录!");
                location.assign("/login.html");
            }
        }
    });
}

getUserInfo();

function getFriendList() {
    $.ajax({
        type: 'get',
        url: '/friendList',

        success: function (body) {
            //先把原有的好友列表清空，建议每次获取都清空
            //因为可能调用多次导致追加
            let friendListUL = document.querySelector("#friend-list");
            friendListUL.innerHTML = "";
            //遍历body并加回到网页中

            for (let friend of body) {
                let li = document.createElement("li");
                li.innerHTML = "<h4>" + friend.friendName + "</h4>";
                //需要记录用户id以备不时之需
                //直接把它记录为li的属性就行
                li.setAttribute("friend-id", friend.friendId);

                friendListUL.appendChild(li);

                //对每个li加上点击事件处理

                li.onclick = function () {
                    //参数区别了当前用户点击的是哪一位
                    clickFriend(friend);
                };
            }

        },

        error: function (body) {
            console.log("getFriendList有问题!");
        }

    });
}

getFriendList();


//获取会话列表
function getSessionList() {
    $.ajax({
        type: 'get',
        url: '/sessionList',
        success: function (body) {
            //清空当前所有会话列表
            let sessionListUL = document.querySelector("#session-list");
            sessionListUL.innerHTML = "";
            //遍历相应，所有的会话列表

            for (let session of body) {
                //针对最后信息作截断处理
                if (session.lastMessage.length > 10) {
                    session.lastMessage = session.lastMessage.substring(0, 10) + "...";
                }

                let li = document.createElement('li');
                //保存id
                li.setAttribute('message-session-id', session.sessionId);

                li.innerHTML = "<h3>" + session.friends[0].friendName + "</h3>"
                    + "<p>" + session.lastMessage + "</p>";
                sessionListUL.appendChild(li);

                //点击反馈(点击事件)
                li.onclick = function () {
                    //这里传参就能保证能拿到点击的li
                    clickSession(li);
                };

            }
        }
    });
}

getSessionList();

function clickSession(currentLi) {
    //设置高亮
    //先获取所有的li，循环遍历，依次对比看这个li是否正在点击
    //是就设置className属性为selected,不是清空className

    let allLis = document.querySelectorAll("#session-list>li");
    activeSession(allLis, currentLi);

    //获取历史消息 TODO

    let sessionId = currentLi.getAttribute("message-session-id");

    getHistoryMessage(sessionId);
}

//直接遍历找
function activeSession(allLis, currentLi) {

    for (let li of allLis) {
        if (li == currentLi) {
            li.className = 'selected';
        } else {
            li.className = "";
        }
    }
}

//问题：怎么让消息默认显示最新消息呢？
//修改之间直接从最上面开始显示的
function getHistoryMessage(sessionId) {
    //获取历史消息(messageController)
    console.log("获取历史消息" + sessionId);
    let titleDiv = document.querySelector(".right .title");
    let messageShowDiv = document.querySelector(".right .message-show");
    messageShowDiv.innerHTML = "";
    titleDiv.innerHTML = "";

    //设置会话标题。点谁就是谁
    //先找到当前会话是谁

    let selectedH3 = document.querySelector("#session-list .selected>h3");

    //可能不存在，比如加载阶段没有任何标签被选中
    if (selectedH3) {
        titleDiv.innerHTML = selectedH3.innerHTML;
    }

    //发送ajax请求

    $.ajax({
        type: "get",
        url: "/message?sessionId=" + sessionId,
        success: function (body) {

            for (let message of body) {
                //把一条消息插入messageDIv中
                addMessage(messageShowDiv, message);
            }

            //添加操作：滚动条自动滚动到最下面
            scrollBottom(messageShowDiv);
        }
    });

}

//把内容滚动到最下面,这里我也不懂，自己问ai吧
function scrollBottom(elem) {
    let clientHeight = elem.offsetHeight;
    let scrollHeight = elem.scrollHeight;

    //进行滚动操作,水平滚动和垂直滚动尺寸

    elem.scrollTo(0, scrollHeight - clientHeight);
}

//注意：css选择器要加点，但定义className时不能加点！
//设置气泡宽度 TODO
function addMessage(messageShowDiv, message) {
    //还需要是靠左还是靠右
    let messageDiv = document.createElement("div");//一条消息
    //获取当前用户名，与fromName进行对比
    let selfUsername = document.querySelector(".left .user").innerHTML;

    if (selfUsername == message.fromName) {
        //自己的消息靠右
        messageDiv.className = "message message-right";
    } else {
        //别人的消息靠左
        messageDiv.className = "message message-left";
    }

    messageDiv.innerHTML = "<div class=box>"
        + "<h4>" + message.fromName + "</h4>"
        + "<p>" + message.content + "</p>"
        + "</div>";

    messageShowDiv.appendChild(messageDiv);
}


//点击好友触发的事件
function clickFriend(friend) {
    //先判断好友是否有会话

    let sessionLi = findSessionByName(friend.friendName);
    let sessionListUL = document.querySelector("#session-list")
    //如果存在，就把当前会话设置选中状态并且置顶
    if (sessionLi) {
        //把参数一插入到参数二之前(都得是子元素)
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);

        // clickSession(sessionLi)
        //这里在创建时就已经注册好点击事件了所以不需要像后面一样再注册
        sessionLi.click();
        //如果不存在，就创建新会话
    } else {
        sessionLi = document.createElement("li");

        //新会话没有最后消息，设置为空
        sessionLi.innerHTML = "<h3>" + friend.friendName + "</h3>" +
            "<p></p>";
        //会话置顶
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);
        //注册点击动作
        sessionLi.onclick = function () {
            clickSession(sessionLi);
        };
        sessionLi.click();

        //与后端交互
        createSession(friend.friendId, sessionLi);

    }


    //把标签页切换到当前会话列表
    //只需要用代码模拟点击会话列表标签页按钮的逻辑就行了

    let tabSession = document.querySelector(".tab .tab-session");
    tabSession.click();


}

function findSessionByName(username) {
    //获取所有li标签，看谁的用户名一致
    let sessionLis = document.querySelectorAll("#session-list>li");

    for (let sessionLi of sessionLis) {
        let h3 = sessionLi.querySelector("h3");

        if (h3.innerHTML == username) {
            return sessionLi;
        }
    }

    return null;

}

//请求给好友id，相应sessionId，放入li标签的属性中
function createSession(friendId, sessionLi) {
    $.ajax({
        type: 'post',
        url: '/session?toUserId=' + friendId,

        success: function (body) {
            console.log("会话创建成功!sessionid=" + body.sessionId);
            sessionLi.setAttribute("message-session-id", body.sessionId);
        },

        error: function (body) {
            console.log("createSession失败!");
        }
    });
}